// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
  transition:
    transform 0.3s ease-out,
    opacity 0.2s ease-in-out;
}

.zoom-out-enter-from,
.zoom-out-leave-to {
  opacity: 0;
  transform: scale(0);
}

// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition:
    transform 0.2s,
    opacity 0.3s ease-out;
}

.zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.92);
}

.zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.06);
}

@keyframes zoom-out {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes zoom-fade {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }

  100% {
    transform: scale(0.92);
    opacity: 0;
  }
}

.zoom-out-slow {
  animation: zoom-out 3s infinite;
}

.zoom-fade-slow {
  animation: zoom-fade 3s infinite;
}
